import React from 'react';
import { Form, Card } from 'antd';
import SearchArea from './searchArea';
import ButtonArea from './buttonArea';
import TableList from './tableList';
import styles from './index.module.scss';

const MTable = ({
  searchItems,
  buttonItems,
  columns,
  dataSource,
  loading,
  onSearch,
  pagination
}) => {
  const [form] = Form.useForm();

  const handleSearch = (values) => {
    onSearch?.(values);
  };

  return (
    <Card className={styles.tableContainer}>
      {searchItems && (
        <div className={styles.searchArea}>
          <SearchArea 
            form={form}
            searchItems={searchItems}
            onSearch={handleSearch}
          />
        </div>
      )}
      
      {buttonItems && (
        <div className={styles.buttonArea}>
          <ButtonArea buttonItems={buttonItems} />
        </div>
      )}

      <div className={styles.tableArea}>
        <TableList 
          columns={columns}
          dataSource={dataSource}
          loading={loading}
          pagination={pagination}
        />
      </div>
    </Card>
  );
};



export default MTable;